<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>填写资料</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--移动端全局样式-->
	<link rel="stylesheet" href="../addons/zh_hkad/template/mobile/css/weui.min.css">
	<link rel="stylesheet" href="../addons/zh_hkad/template/mobile/css/jquery-weui.css">    
    <link href="../addons/zh_hkad/template/mobile/css/common.css" type="text/css" rel="stylesheet"/>
    <link href="../addons/zh_hkad/template/mobile/css/index.css" type="text/css" rel="stylesheet"/> 

    <script src="../addons/zh_hkad/template/mobile/js/jquery-2.1.4.js"></script>
    <!-- <script src="../addons/zh_hkad/template/mobile/js/imgPluginNew.js"></script> -->
	
 <!-- <script src="../addons/zh_hkad/template/mobile/js/imgUp.js"></script> -->
 <script src="../addons/zh_hkad/template/mobile/js/jquery-weui.js"></script>
	<script src="../addons/zh_hkad/template/mobile/js/fastclick.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	
    <style>
		.weui-cells:before{
			border-top: 1px solid #fff;
		}
		.weui-cells{
			margin-top: 0
		}
		body{
			padding: 0;
			margin:0;
		}
		.bg{
			width: 100%;
			height: auto;
		}
		.weui-cell__bd{
			width: 100%;
		    height: 40px;
		}
		.weui-cell__bd label{
			width: 20%;
		    float: left;
		    line-height: 40px;
		    font-size: 16px;
		}
		.msg{
			float: left;
		    width: 78%;
		    height: 100%;
		    font-size: 14px;
		    border:0;
		    color: #888;
		    background: #fff;
		}
		.weui-cell__bd label.phone_tip{
			width:19%;
		}
		.msg.phone{
			width: 77%
		}
		.submit{
			width: 30%;
		    background: #2f8ff3;
		    color: #fff;
		    font-size: 18px;
		    border-radius: 15px;
		    padding: 5px 0;
		    border: 0;
		    height: auto;
		    margin: 30px auto;
		    display: block;
		}
		.tip{
			padding: 0 15px;
			font-size: 15px;
			color: #666;
			margin-top: 20px;
		}
		.tip_title{
			color: #2f8ff3;
		}
		.select{
			padding: 0 22px;
		    font-size: 15px;
		    margin-top: 15px;
		    color: #2f8ff3;
		    overflow: hidden;
    		width: 100%;
		}
	/*	.select input{
			float: left;
		    margin-top: 5px;
		    margin-right: 15px;
		}*/
		.upfile_box{
			position: relative;
		}
		.upfil_img{
			width: 100%;
			height: 100%;
			background: #fff;
		}
		.upfile_btn{
			position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    opacity: 0;
		}
		.agree{
			color: red;
			font-size: 12px;
			float: left;
		}
		.select_input input{
			display: none;
		}
		.select_input img{
			float: left;
			margin-right: 10px;
			width: 20px;
			height: 20px;
			border-radius: 100%;

		}
		.xy_tip{
			display: none;
			position: fixed;
			top:0;
			left: 0;
			/*background: rgba(0,0,0,0.5);*/
			background-color:#fff;
			width: 100%;
			height: 100%;
			color: #999;
			font-size: 14px;
			z-index: 10000
		}
		.xy_cancel{
		    display: block;
		    width: 100%;
		    text-align: right;
		    font-size: 30px;
		    padding-right: 15px;
		    color:red;
		}
		.xy_con{
			padding: 0 15px;
		}
/*	    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
        	color: #aedd81;
        	background: #fff;
    	}*/ 

    </style>
</head>
<body>
    <div class="img-box full">
        <section class="img-section">
            <div class="z_photo upimg-div clear" >
                 <section class="z_file fl">
                    <img src="../addons/zh_hkad/template/mobile/img/all.png" class="add-img">
                    <input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple="multiple" />
                 </section>
             </div>
         </section>
    </div> 
    <input type="hidden" name="order_id" value="" />
    <input type="hidden" name="status" value="" />
    <aside class="mask works-mask">
        <div class="mask-content">
            <p class="del-p ">您确定要删除作品图片吗？</p>
            <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
        </div>
    </aside>    
    <span id="input_arr"></span>

    	<div class="weui-cells weui-cells_form box">
	      <div class="weui-cell weui-cell_vcode">
	        <div class="weui-cell__bd">
				<label class="weui-label">面积</label>
		        <input class="weui-input msg size" type="number" placeholder="请输入面积 (例：120)">
	        </div>
	      </div>
	      <div class="weui-cell weui-cell_vcode">
	        <div class="weui-cell__bd">
				<label class="weui-label phone_tip">风格</label>
	 			<select name="style" id="style" class="msg type">
	 				<option value="0">请选择装修风格</option>
	 				{loop $style $row}
					<option value="{$row}">{$row}</option>
					{/loop}
	 			</select>
	        </div>
	      </div>
	      <div class="weui-cell weui-cell_vcode">
	        <div class="weui-cell__bd">
			<label class="weui-label phone_tip">户型</label>
				<select name="type" id="type" class="msg type">
	 				<option value="0">请选择户型</option>
					{loop $home $row}
					<option value="{$row}">{$row}</option>
					{/loop}
	 			</select>
	        </div>
	      </div>      
	    </div>

		<div class="tip">
			<p class="tip_title">温馨提示 :</p>
			{$active['tip']}
		</div>
		<div class="select">
			<div class="select_input">
				<img src="../addons/zh_hkad/template/mobile/img/weixuanzhong.png" alt="" class="select_img">
				<input type="checkbox" class="checkbox" id="select">
				<a href="javascript:;" class="agree">我已阅读并同意此协议</a>
			</div>
		</div>
		<form action="{php echo $this->createMobileUrl('rpay');}" method="post">
			<input class="weui-input submit mui-btn mui-btn-block mui-disabled js-wechat-pay" type="submit" value="提交资料">
		</form>
<!-- </form> -->
	<!--弹框提示-->
	<div class="xy_tip">
		<span class="xy_cancel">×</span>
		<div class="xy_con">
			{$active['protocol']}
		</div>
	</div>
</body>
<script type="text/javascript">
	$(function(){
	var delParent;

	var defaults = {

		fileType         : ["jpg","png","bmp","jpeg"],   // 上传文件的类型

		fileSize         : 1024 * 1024 * 10                  // 上传文件的大小 10M

	};

		/*点击图片的文本框*/
		var imgs=[];
		var tmdimgs=[];
	$(".file").change(function(){	 

		var idFile = $(this).attr("id");

		var file = document.getElementById(idFile);

		var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素

		var fileList = file.files; //获取的图片文件

		var input = $(this).parent();//文本框的父亲元素

		var imgArr = [];
		var tmdimgArr = [];

		//遍历得到的图片文件

		var numUp = imgContainer.find(".up-section").length;

		var totalNum = numUp + fileList.length;  //总的数量

		if(fileList.length > 5 || totalNum > 5 ){

			alert("上传图片数目不可以超过5个，请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个

		}

		else if(numUp < 5){
				console.log("执行")
			fileList = validateUp(fileList)

			for(var i = 0;i<fileList.length;i++){
				console.log(fileList[i]);
				var tmdimgUrl=fileList[i];
				var uptmdimg=fileList[i];
				console.log(URL.createObjectURL(fileList[i]));
				console.log(window.URL.createObjectURL(fileList[i]));
			 var imgUrl = window.URL.createObjectURL(fileList[i]);

			 		
			     imgArr.push(imgUrl);
			     imgs.push(imgUrl);
			     tmdimgArr.push(tmdimgUrl);
			     tmdimgs.push(tmdimgUrl);
			     // console.log(1);
			     console.log(imgArr);
			     console.log(imgs);
			     console.log(tmdimgArr);
			     console.log(tmdimgs);
			     console.log('dd');
			     console.log(uptmdimg);
			     console.log('cc');
			     var tmddata = new FormData();
		        //为FormData对象添加数据
		            tmddata.append('upload_file', uptmdimg);
		            console.log(tmddata);
			     $.ajax({
			     	type:"post",
			     	url:"{$_W['siteroot']}app/index.php?i={$_W['uniacid']}&c=entry&a=site&do=uploads&m=zh_hkad",
			     	data:tmddata,
			     	processData: false,  // 告诉jQuery不要去处理发送的数据  
					contentType: false,
					success:function(data){
                	console.log(data);
		            },
		            error:function(data){

		            	console.log(data)
		            	console.log("失败")
		            }
			     })
			 var $section = $("<section class='up-section fl loading'>");

			     imgContainer.prepend($section);

			 var $span = $("<span class='up-span'>");

			     $span.appendTo($section);

			

		     var $img0 = $("<img class='close-upimg'>").on("click",function(event){

				    event.preventDefault();

					event.stopPropagation();

					$(".works-mask").show();

					delParent = $(this).parent();

				});   

				$img0.attr("src","img/a7.png").appendTo($section);

		     var $img = $("<img class='up-img up-opcity'>");

		         $img.attr("src",imgArr[i]);

		         $img.appendTo($section);

		     var $p = $("<p class='img-name-p'>");

		         $p.html(fileList[i].name).appendTo($section);
		     var $input0 = $("<input id='tmd' name='tmd' value='' type='file' style='display:none;'>");

		         $input0.attr("value",fileList[i].name);
		         $input0.appendTo($section);

		     var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");

		         $input.appendTo($section);

		     var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");

		         $input2.appendTo($section);

		      

		   }

		}

		setTimeout(function(){

             $(".up-section").removeClass("loading");

		 	 $(".up-img").removeClass("up-opcity");

		 },450);

		 numUp = imgContainer.find(".up-section").length;

		if(numUp >= 5){

			$(this).parent().hide();

		}

	});

	

	

   

    $(".z_photo").delegate(".close-upimg","click",function(){

     	  $(".works-mask").show();

     	  delParent = $(this).parent();

	});

		

	$(".wsdel-ok").click(function(){

		$(".works-mask").hide();

		var numUp = delParent.siblings().length;

		if(numUp < 6){

			delParent.parent().find(".z_file").show();

		}

		 delParent.remove();

	});

	

	$(".wsdel-no").click(function(){

		$(".works-mask").hide();

	});

		

		function validateUp(files){

			var arrFiles = [];//替换的文件数组

			for(var i = 0, file; file = files[i]; i++){

				//获取文件上传的后缀名

				var newStr = file.name.split("").reverse().join("");

				if(newStr.split(".")[0] != null){

						var type = newStr.split(".")[0].split("").reverse().join("");

						console.log(type+"===type===");

						if(jQuery.inArray(type, defaults.fileType) > -1){

							// 类型符合，可以上传

							if (file.size >= defaults.fileSize) {

								alert(file.size);

								alert('您这个"'+ file.name +'"文件大小过大');	

							} else {

								// 在这里需要判断当前所有文件中

								arrFiles.push(file);	

							}

						}else{

							alert('您这个"'+ file.name +'"上传类型不符合');	

						}

					}else{

						alert('您这个"'+ file.name +'"没有类型, 无法识别');	

					}

			}

			return arrFiles;

		}

})
</script>
<script>
$(function(){
    FastClick.attach(document.body);
	var xxid = sessionStorage.getItem("key");
	var money = sessionStorage.getItem("moneykey");

	$(".agree").click(function(){
		$(".xy_tip").show()
	})

	$(".xy_cancel").click(function(){
		$(".xy_tip").hide()
	})
	var status=true
	$(".select_img").click(function(){
		status=$(this).siblings(".checkbox").is(':checked')//协议
		//.log(status)
		if(status==false){
			//console.log(99)
			$(this).siblings(".checkbox").prop( "checked",true)
			$(this).attr("src","../addons/zh_hkad/template/mobile/img/xuanzhong.png")
		}else{
			$(this).siblings(".checkbox").prop("checked",false)
			$(this).attr("src","../addons/zh_hkad/template/mobile/img/weixuanzhong.png")

		}
	})

	console.log(xxid);
	$(".submit").click(function(){
		var size=$(".size").val()//房屋面积
		var style=$("#style option:selected").val()//装修风格
		var type=$("#type option:selected").val()//户型
        // var status=$(".checkbox").is(':checked')//协议
        //var imgs=$(".up-img").attr("src")
        // console.log(status)
        var imglists=$(".up-section .up-img");
		var imgs = [];		
		for(var j=0;j<imglists.length;j++){
			var all=imglists[j].src
			//console.log(all)
			imgs.push(all)
		 }

		var tmdimglists=$(".up-section #tmd");
		console.log(tmdimglists);
		var tmdimgs = [];		
		for(var j=0;j<tmdimglists.length;j++){
			//var all=tmdimglists[j].value
			var all=tmdimglists[j].defaultValue
			console.log(all)
			tmdimgs.push(all)
		 }

		console.log(imgs)
		var objimgs=JSON.stringify(imgs);
		console.log(objimgs)
		if(imgs==""){
			alert("请上传户型图")
			return false
		}else if(size==""){
			alert("请输入房屋面积")
			return false
		}else if(style==0){
			alert("请选择装修风格")
			return false
		}else if(type==0){
			alert("请选择户型")
			return false			
		}else if(status==true){
			alert("请勾选同意此协议")
			return false
		}
		if (status==false) {
			status=1;
		}
		// alert(status);
		console.log('11111');
		console.log(tmdimgs);
		console.log('2222222');
		$.ajax({
            type:"post",
            url:"{$_W['siteroot']}app/index.php?i={$_W['uniacid']}&c=entry&a=site&do=rneed&m=zh_hkad",
            dataType:"json",
            data:{area:size,style:style,home:type,agree:status,imgs:imgs,xxid:xxid,tmdimgs:tmdimgs,money:money},
            success:function(data){
                // console.log(data);
               // alert(data.data);
    //             document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
				//     $('.js-wechat-pay').removeClass('mui-disabled');
				//     // $('.js-wechat-pay').click(function(){
				//         //先通过AJAX获取最新的订单号
				//         $.getJSON("xxxx.php", function(data, status){
				//             if(status == 'success'){
				//                 util.pay({
				//                     orderFee : data.fee,
				//                     payMethod : 'wechat',
				//                     orderTitle : '充值' + data.fee + '元',
				//                     orderTid : data.ordertid,
				//                     module : 'recharge',
				//                     success : function(result) {
				//                         alert('支付成功');
				//                     },
				//                     fail : function(result) {
				//                         alert('fail : ' + result.message);
				//                     },
				//                     complete : function(result) {
				//                         location.reload();
				//                     }
				//                 });
				//             }
				//         });
				//     // });
				//     $('.js-wechat-pay').html('微信支付');
				// });
				// window.location.href="{$_W['siteroot']}app/index.php?i={$_W['uniacid']}&c=entry&do=hrpay&m=zh_hkad";      
                //location.reload();
            },
            error:function(data){

            	console.log(data)
            	console.log("失败")
            }

        })
	});
});
	
</script>
</html>